<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style>
        div {
            width: 100vw;
            height: 100vh;
            background-color: green;
        }
    </style>
    <!--    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
</head>
<body>
<div></div>
<script>
    window.onload = function () {
        let divEle = document.getElementsByTagName('div')[0];
        divEle.addEventListener('dragover', function (e) {
            // 取消默认浏览器拖拽效果
            e.preventDefault();
        });
        divEle.addEventListener('drop', function (e) {
            e.dataTransfer = e.originalEvent && e.originalEvent.dataTransfer;
            let dataTransfer = e.dataTransfer;
            if (dataTransfer && dataTransfer.files && dataTransfer.files.length) {
                e.preventDefault();
                getFileDirectory(dataTransfer).then(function (files) {
                    debugger
                });
            }
        });
    };

    function getFileDirectory(dataTransfer) {
        // eslint-disable-next-line no-param-reassign
        dataTransfer = dataTransfer || {};
        let items = dataTransfer.items;
        if (items && items.length && (items[0].webkitGetAsEntry || items[0].getAsEntry)) {
            let array = [];
            for (const item of items) {
                if (item.webkitGetAsEntry) {
                    let entry = item.webkitGetAsEntry();
                    if (entry) {
                        // Workaround for Chrome bug #149735:
                        entry._file = item.getAsFile();
                    }
                    array.push(entry)
                } else {
                    array.push(item.getAsEntry())
                }
            }
            return _handleFileTreeEntries(array);
        }
        return new Promise((resolve, reject) => {
            const array = [];
            for (const file of dataTransfer.files) {
                array.push(file)
            }
            resolve(array);
        })
    }

    function _handleFileTreeEntries(entries, path) {
        return new Promise((resolve, reject) => {
            const array = [];
            for (let i = 0; i < entries.length; i++) {
                const entry = entries[i];
                _handleFileTreeEntry(entry, path).then(function (file) {
                    array.push(file);
                    if (array.length === entries.length) {
                        resolve(array);
                    }
                })
            }
        })
    }


    function _handleFileTreeEntry(entry, path) {
        return new Promise((resolve, reject) => {
            let entries = [],
                dirReader,
                errorHandler = function (e) {
                    if (e && !e.entry) {
                        e.entry = entry;
                    }
                    // Since $.when returns immediately if one
                    // Deferred is rejected, we use resolve instead.
                    // This allows valid files and invalid items
                    // to be returned together in one set:
                    resolve([e]);
                },
                successHandler = function (entries) {
                    _handleFileTreeEntries(entries, path + entry.name + '/').then(function (files) {
                        resolve(files);
                    }, (e) => {
                        errorHandler(e)
                    });
                },
                readEntries = function () {
                    dirReader.readEntries(function (results) {
                        if (!results.length) {
                            successHandler(entries);
                        } else {
                            entries = entries.concat(results);
                            readEntries();
                        }
                    }, errorHandler);
                };
            // eslint-disable-next-line no-param-reassign
            path = path || '';
            if (entry.isFile) {
                if (entry._file) {
                    // Workaround for Chrome bug #149735
                    entry._file.relativePath = path;
                    resolve(entry._file);
                } else {
                    entry.file(function (file) {
                        file.relativePath = path;
                        resolve(file);
                    }, errorHandler);
                }
            } else if (entry.isDirectory) {
                dirReader = entry.createReader();
                readEntries();
            } else {
                // Return an empty list for file system items
                // other than files or directories:
                resolve([]);
            }
        });
    }
</script>
</body>
</html>
